import React, { Component } from 'react';
import "../../styles/Index/Cate.scss"

import { MoreOutline } from 'antd-mobile-icons'
import { SearchBar } from "antd-mobile"

import { category_list, category_subcate } from '../../api/index'


class Cate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [], //一级分类列表
            subcate: {}, //二三级分类
            currentIndex: 0,
        }
    }
    handleCates(id) {
        console.log(id);
        this.props.history.push({ pathname: '/index/allgood', state:{id: id} })
    }
    componentDidMount() {
        //请求一级分类
        category_list().then((res) => {
            console.log(res.data);
            this.setState({
                list: res.data.list
            })
            //请求第一个一级分类对应的二三级分类
            category_subcate({ id: res.data.list[0].id }).then((res) => {
                this.setState({
                    subcate: res.data.subcate
                })
            })
        })
    }
    requestSubCate(id, index) {
        //接收点击的一级分类id, 请求对应的二三级分类
        category_subcate({ id }).then((res) => {
            // console.log(res.data.subcate);
            this.setState({
                currentIndex: index,
                subcate: res.data.subcate
            })
        })
    }
    render() {
        return (
            <div className='cate'>
                <div className="head">
                    <div className='header'>
                        <span>分类</span>
                        <div className='you'><MoreOutline fontSize={38} /></div>
                    </div>
                    <div className='search'><SearchBar placeholder='请输入内容' /></div>
                </div>

                <div className='kind'>
                    {/* 一级分类 */}
                    <div className="left">
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <div onClick={() => { this.requestSubCate(item.id, index) }} className={`btn ${this.state.currentIndex === index ? 'actives' : ''}`} key={index}> {item.name} </div>
                                )
                            })
                        }
                    </div>

                    {/* 二三级分类 */}
                    <div className="right">
                        {/* 二级分类列表 */}
                        {
                            this.state.subcate.subcategory &&
                            this.state.subcate.subcategory.map((item2, index) => {
                                return (
                                    <div className="box" key={index}>
                                        <h3 className='title' >{item2.name}</h3>
                                        {/* 三级分类列表 */}
                                        <div className="list">
                                            {
                                                item2.subNavs.map((item3, index) => {
                                                    return (
                                                        <div className="cates" onClick={() => { this.handleCates(item3.id) }} key={index}>
                                                            <img src={item3.pic} alt="" />
                                                            <div className="name">{item3.name}</div>
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default Cate;